<template>
  <view class="work-container">
    <view :style="marginTop">
      <view class="container">
        <!-- 一级标签 -->
        <view class="bottom10">
          <combox-search
              labelWidth="130px"
              emptyTips="无匹配选项"
              :isJSON="true"
              label="我想要"
              :keyName="keyName"
              placeholder="请输入或选择您想解决的问题"
              :candidates="issueList"
              @getValue="getValue"
              @clear="clearOne"
          ></combox-search>
        </view>
        <view class="children-box" v-for="(item,index) in childrenNum" :key="index">
          <uni-section
              title="请补充"
              type="line"
              padding="0"
          >
            <combox-search
                labelWidth="130px"
                emptyTips="无匹配选项"
                :isJSON="true"
                :keyName="keyName"
                placeholder="请输入或选择您想解决的问题"
                label="我想要"
                :candidates="childrenList[index].data"
                v-if="childrenList[index].type === '1'"
                @getValue="getValueChildren($event,index)"
                @clear="clearTwo(index)"
            ></combox-search>
            <u-textarea
                v-model="valueLabel2"
                placeholder="请输入咨询内容"
                v-else-if="childrenList[index].type === '3'"
            ></u-textarea>
          </uni-section>
        </view>

        <view class="bottom10 top10">
          <u-input
              v-model="phoneNumber"
              placeholder="补全电话信息"
              maxlength="11"
              type="number"
              border="none"
              :placeholderStyle="inputStyle"
              :customStyle="inputCustomStyle"
          >
            <view class="text-wrapper" slot="prefix">
              <text>请补充</text>
            </view>
            <template slot="suffix">
              <u-button  shape="circle" text="点此授权手机号" size="small"
                        @click="getPhoneNumber" color="#e43d33"></u-button>
            </template>
          </u-input>
        </view>

        <view>
          <u-button
              :text="buttonName"
              shape="circle"
              color="#e43d33"
              @click="submit"
          ></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import comboxSearch from "@/components/cuihai-combox/cuihai-combox.vue";
import NavBar from "@/components/nav-bar.vue";
import {isEmptyString} from "@/utils/common";
import {getStorage} from "@/utils/auth";
import application from "@/static/const/application";
import {showToast} from "@/utils/uniappTools";

export default {
  name: "solution",
  components: {
    comboxSearch,
    NavBar,
  },
  data() {
    return {
      marginTop: "",
      inputStyle: "color:grey;font-size:0.8rem",
      inputCustomStyle: {
        "background-color": "#f3f3f3",
        "border-radius": "10px",
        padding: "5px",
        height: "40px",
      },
      issueList: [],
      keyName: "name",
      oneLabelIndex: "",
      valueLabel2: "",
      showChildren: false,
      childrenNum: 0,
      childrenList: [],
      buttonName: "提交解决方案",
      serviceType: "",
      serviceId: "",
      phoneNumber: "",
      user: {},
    };
  },
  created() {
    this.getList();
    this.user = getStorage(application.user);
  },
  onLoad() {
    const top = uni.getSystemInfoSync().statusBarHeight + 44;
    this.marginTop = "margin-top:" + top + "px";
  },
  watch: {
    model(val) {
      if (val.length > 5) {
        this.$nextTick(() => this.model.pop());
      }
    },
  },
  methods: {
    getList() {
      this.$store
          .dispatch("ListTagTree")
          .then((res) => {
            this.issueList = res.data;
          })
          .catch((err) => {
          });
    },
    getValue(e) {
      this.oneLabelIndex = e;

      this.clearOne();
      this.getChildrenList(this.issueList[this.oneLabelIndex].id, this.issueList[this.oneLabelIndex].type)
    },
    getValueChildren(e, index) {
      this.clearTwo(index);
      const list = this.childrenList[index].data;
      this.getChildrenList(list[e].id, list[e].type)
    },
    getChildrenList(id, type) {
      const that = this;
      this.$store
          .dispatch("ListTagTree", id)
          .then((res) => {
            if (!isEmptyString(res.data)) {
              that.showChildren = true;
              that.childrenNum = that.childrenNum + 1;
              that.childrenList.push({
                type: type,
                data: res.data
              })
            } else {
              that.$store
                  .dispatch("GetTag", id)
                  .then((res) => {
                    that.getDetail(res.data);
                  })
                  .catch((err) => {
                    console.log("err", err);
                  });
            }
          })
          .catch((err) => {
            console.log("err", err);
          });

    },
    clearOne() {
      this.childrenNum = 0;
      this.childrenList = [];
      this.buttonName = "提交解决方案";
    },
    clearTwo(index) {
      this.childrenList.splice(index + 1, this.childrenNum - index - 1)
      this.childrenNum = index + 1;
      this.buttonName = "提交解决方案";
    },
    getDetail(data) {
      this.buttonName = data.buttonName;
      this.serviceType = data.serviceType;
      this.serviceId = data.serviceId;
    },
    //提交解决方案
    submit() {
      if (isEmptyString(this.oneLabelIndex)) {
        showToast("请输入需求代理");
        return;
      }
      if (isEmptyString(this.phoneNumber)) {
        showToast("请输入手机号");
        return;
      }
      switch (this.serviceType) {
        case "0":
          uni.switchTab({
            url: "/pages/law-team-list/index"
          });
          break;
        case "1":
          if (isEmptyString(this.serviceId)) {
            uni.navigateTo({
              url: "/pages/lawadvice-list/index"
            });
          } else {
            uni.navigateTo({
              url: "/pages/telephone-consultation/index?id=" + this.serviceId+"&phone="+this.phoneNumber
            });
          }
          break;
        case "2":
          if (isEmptyString(this.serviceId)) {
            uni.navigateTo({
              url: "/pages/law-service/index"
            });
          } else {
            uni.navigateTo({
              url: "/pages/law-service-detail/index?id=" + this.serviceId+"&phone="+this.phoneNumber
            });
          }
          break;
        default:
          if(isEmptyString(this.serviceType)) {
            uni.showToast({
              title: "找不到对应的服务",
              icon: "none",
              duration: 2000
            });
          }
          break;
      }
    },
    //获取手机号
    getPhoneNumber() {
     if(isEmptyString(this.user.phonenumber)) {
       uni.navigateTo({
         url: "/pages/login"
       });
     }else{
       this.phoneNumber = this.user.phonenumber;
     }
    },
  },
};
</script>

<style lang="scss">
.work-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  margin-top: 1rem;

  .container {
    width: 100%;
    // padding-bottom: 40rpx;
    /deep/ .uni-section-content {
      display: flex;
      flex-direction: column;
      padding-left: 20rpx;
      padding-right: 20rpx;

      .uni-combox {
        width: 100%;
        border-radius: 10px;
        border: 1px solid #cdcdcd;
        padding-left: 10rpx;
      }

      /deep/ .u-input {
        height: 80rpx;
        border: 1px solid #cdcdcd !important;
        border-radius: 10px;

        .uni-input-placeholder {
          font-size: 32rpx;
        }
      }
    }

    /deep/ .uni-section .uni-section-header__decoration {
      margin-right: 6px;
      background-color: #e43d33;
    }

    .top10 {
      margin-top: 0.5rem;
    }
  }
}

.label2 {
  display: none;
}

.label3 {
  display: none;
}

/deep/ .u-checkbox {
  padding-bottom: 20rpx;
}

.label2-block {
  display: block;
}

.label3-block {
  display: block;
}

.bottom10 {
  margin-bottom: 0.5rem;

  .text-wrapper {
    text {
      color: #999999;
      font-size: 0.8rem;
      padding-right: 8px;
      border-right: 1px solid #999;
    }
  }
}
</style>
  